<template>
	<div>
		<!--面包屑-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }"> 首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!--卡片视图-->
		<el-card>
			<!--搜索框-->
			<el-row>
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInfo.query">
						<el-button slot="append" icon="el-icon-search" @click="getOrderlist"></el-button>
					</el-input>
				</el-col>
			</el-row>

			<!--表格区域-->
			<el-table :data="orderList" stripe border>
				<el-table-column type="index" label="#"> </el-table-column>
				<el-table-column prop="order_number" label="订单编号"> </el-table-column>
				<el-table-column prop="order_price" label="订单价格" width="100"> </el-table-column>
				<el-table-column label="是否付款" width="100">
					<template slot-scope="scoped">
						<el-tag type="danger" v-if="scoped.row.order_pay === '0'">未付款</el-tag>
						<el-tag type="success" v-if="scoped.row.order_pay === '1'">已付款</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="is_send" label="是否发货" width="100"> </el-table-column>
				<el-table-column prop="create_time" label="下单时间" width="180">
					<template slot-scope="scoped">
						{{ scoped.row.create_time | dateFormat }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="140">
					<template slot-scope="scoped">
						<!--编辑按钮-->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditBox"></el-button>
						<el-button type="success" icon="el-icon-location" size="mini" @click="showProgressBox"></el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--分页区域-->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</el-card>
		<!--修改地址的对话框-->
		<el-dialog title="修改地址" :visible.sync="dialogVisible" width="30%" @close="addressDialogClose">
			<el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
				<el-form-item label="省市区/县" prop="address1">
					<el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
				</el-form-item>

				<el-form-item label="详细地址" prop="address2">
					<el-input v-model="addressForm.address2"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

		<!--展示物流进度的对话框-->
		<el-dialog title="物流进度" :visible.sync="dialogVisible2" width="50%">
      <!--TimeLine时间线-->
			<el-timeline>
				<el-timeline-item v-for="(activity, index) in progressData" :key="index" :timestamp="activity.time">
					{{ activity.context }}
				</el-timeline-item>
			</el-timeline>

		</el-dialog>
	</div>
</template>

<script>
// 导入地址
import cityData from './citydata'
// 导入物流信息 -- 因数据接口无法连接，固使用本地数据测试
import progress from "@/components/order/progress";
export default {
	data() {
		return {
			// 请求传参数据
			queryInfo: {
        query: '',
				pagenum: 1,
				pagesize: 5,
			},

			// 订单列表数据
			orderList: [],
			// 订单数据总条数
			total: 0,
			// 控制修改地址对话框显示与隐藏的属性
			dialogVisible: false,
			// 控制展示物流进度对话框显示与隐藏的属性
			dialogVisible2: false,

			// 订单地址
			addressForm: {
				address1: [],
				address2: '',
			},

			// 订单地址校验规则
			addressFormRules: {
				address1: [{ required: true, message: '请选择省市区/县', trigger: 'blur' }],
				address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
			},
			// 省市区县联动数据
			cityData: cityData,
      // 本地物流信息数据
      progressData:progress[0].data
		}
	},
	created() {
		this.getOrderlist()
	},
	methods: {
		// 请求订单列表数据
		async getOrderlist() {
			const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
			if (res.meta.status !== 200) {
				return this.$message.error('获取订单数据失败')
			} else {
				this.orderList = res.data.goods
				this.total = res.data.total
			}
		},

		// 监听当前选择每页几条数据的事件
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize
			this.getOrderlist()
		},

		// 监听当前第几页的事件
		handleCurrentChange(newPage) {
			this.queryInfo.pagenum = newPage
			this.getOrderlist()
		},

		// 展示修改地址的对话框
		showEditBox() {
			this.dialogVisible = true
		},

		// 关闭修改地址对话框时清空数据
		addressDialogClose() {
			this.$refs.addressFormRef.resetFields()
		},
		// 展示物流进度的对话框
		async showProgressBox() {
			// 此接口失效
			// const { data: res } = await this.$http.get('/kuaidi/' + 804909574412544580)
			this.dialogVisible2 = true
		},
	},
	computed: {},
}
</script>

<style lang="less" scoped>
.el-cascader{
  width: 100%;
}
</style>
